<template>
  <div style="height: 100%">
    <el-row>
      <el-col :span="24">
        <el-card header="订单情况">
          <div id="statisticMemberOrder" style="height: 200px;"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-card header="月下单情况">
          <div id="statisticMemberMonthOrder" style="height: 200px;width: 520px"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { Chart } from '@antv/g2'
import { useStore } from 'vuex'
import statisticalApi from '../../../api/statistical'
import { reactive, onMounted, toRefs } from 'vue'

export default {
  name: 'orderStatistical',
  components: {
    Chart
  },
  setup () {
    const store = useStore()
    let userInfo = store.getters.userInfo
    //-------------------method start
    // 根据客户id查询出当前每个订单状态下面的数量
    const getstatisticMemberOrder = () => {
      statisticalApi.statisticMemberOrder(userInfo.id).then(res => {
        const chart = new Chart({
          container: 'statisticMemberOrder',
          autoFit: true,
          height: 200,
          width: 520
        })
        chart.data(res.data)
        chart.scale('value', {
          formatter: (val) => {
            return val
          }
        })
        chart.coordinate('theta', {
          radius: 0.75,
          innerRadius: 0.6
        })
        chart.tooltip({
          showTitle: false,
          showMarkers: false,
          itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
        })
        chart.interval().adjust('stack').position('value').color('name').label('value', (value) => {
          return {
            content: (data) => {
              return `${data.name}: ${data.value}`
            }
          }
        }).tooltip('name*value', (item, percent) => {
          return {
            name: item,
            value: percent
          }
        })
        chart.interaction('element-active')
        chart.render()
      })
    }
    // 客户月统计订单
    const getStatisticMemberMonthOrder = () => {
      statisticalApi.statisticMemberMonthOrder(userInfo.id).then(res => {
        const chart = new Chart({
          container: 'statisticMemberMonthOrder',
          autoFit: true,
          height: 500,
        })
        // 计算总单量
        let totalOrders = 0
        res.data.forEach(e => {
          totalOrders += e.value
        })
        chart.data(res.data)
        chart.scale({
          name: {
            range: [0, 1],
          },
          value: {
            min: 0,
            nice: true,
          },
        })
        chart.tooltip({
          showCrosshairs: true, // 展示 Tooltip 辅助线
          shared: true,
        })
        chart.annotation().text({
          position: ['50%', '50%'],
          content: '总订单',
          style: {
            fontSize: 14,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetY: -20
        }).text({
          position: ['50%', '50%'],
          content: totalOrders,
          style: {
            fontSize: 20,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetX: -10,
          offsetY: 20
        }).text({
          position: ['50%', '50%'],
          content: '单',
          style: {
            fontSize: 14,
            fill: '#8c8c8c',
            textAlign: 'center'
          },
          offsetY: 20,
          offsetX: 20
        })
        chart.line().position('name*value').label('value')
        chart.point().position('name*value')
        chart.render()
      })
    }
    //-------------------method end
    onMounted(() => {
      getstatisticMemberOrder()
      getStatisticMemberMonthOrder()
    })
  }
}
</script>

<style scoped>

</style>
